<template>
  <div v-for="(item ,index) in colorList" :key="item.color" class="color-list" @click="changeColor(index)">
    <div class="card" :class="{select: (index === selectColorIndex)}">
      <div :style="{background: item.color}" />
    </div>
    <div style="text-align:center" :class="{text: (index === selectColorIndex)}">{{ item.title }}</div>
  </div>
</template>

<script setup lang="ts">
  import {ref} from 'vue'
  const emit = defineEmits(['update:value'])

  let colorList:any = ref([
    {color: '#1965FF', title: '默认', name: 'theme-default'},
    {color: '#409EFF', title: '蓝色', name: 'theme-blue'},
    {color: '#67C23A', title: '绿色', name: 'theme-green'},
    {color: '#FF9326', title: '橙色', name: 'theme-orange'},
    {color: '#F56C6C', title: '红色', name: 'theme-red'},
    {color: '#A126FF', title: '紫色', name: 'theme-purple'},
    {color: '#6C6F91', title: '深夜', name: 'theme-black'},
  ])

  const selectColorIndex = ref(0)
  const selectColor = ref('#1965FF')

  // 赋默认值  
  const setColor = (value) => {
    for (let i = 0; i<colorList.value.length; i++) {
        if (colorList.value[i].name === value ) {
        selectColorIndex.value = i
        selectColor.value = colorList.value[i].color
        break
        }
    }
  }
  
  // 切换颜色
  const changeColor = (i) => {
    selectColor.value = colorList.value[i].color
    selectColorIndex.value = i
    emit('update:value', colorList.value[i].name)
  }
  defineExpose({setColor})
</script>

<style lang="less" scoped>
.color-list {
  display: flex;
  display: inline-flex;
  width: 50px;
  padding:0 15px 10px 0;
  flex-direction: column;
  .card {
    width: 35px;
    height: 35px;
    padding: 3px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    div {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
  .select {
    border-color: v-bind(selectColor)
  }
  .text {
    color: v-bind(selectColor)
  }
}
</style>